<template>
    <div style="height: 100%; width: 100%" ref="workrunindex">
        <div style="height: calc(100% - 60px); width: 100%; overflow-y: auto;overflow-x: hidden;">
            <lay-card style="">
                <h1 class="title">{{ fromdata?.form == undefined ? "" : fromdata?.form?.name }}</h1>
            </lay-card>

            <lay-container :fluid="true" style="padding: 10px; padding-top: 0px; position: relative">
                <lay-col md="24">
                    <lay-card >
                        <LayerForm ref="layFormRef" v-if="fromdata?.data?.length>0" :fromdata="fromdata" :fromvalue="{}" @callback="(e) => { 
                      
                            console.log(e); 
                            }"
                            @errorcallback="() => { console.log('errorcallback'); }">

                        </LayerForm>

                    </lay-card>
                </lay-col>
                <lay-col md="24">
                    <lay-card v-if="signature&&commentlist.length>0" title="历史意见">
                        <lay-timeline>
                            <div v-for="(item, index) in commentlist" :key="index">
                                <lay-timeline-item :title="getmoment(item?.completedtime1)">
                                    <p>
                                        {{ '【' + item?.stepname + '】:' }}
                                    </p>
                                    <div classs="article-detail-content w-e-text">
                                        <div v-if="item?.comment" v-html="item?.comment"></div>
                                    </div>
                                </lay-timeline-item>
                            </div>
                        </lay-timeline>
                    </lay-card>

                </lay-col>

            </lay-container>

        </div>
        <div class="footer">
            <div class="footer-button">
                <lay-button-group>
                    <lay-button v-for="n in flowevent" :key="n" :class="n.style" :prefix-icon="n.ico"
                        @click="Events(n)">{{ n.title }}
                    </lay-button>
                </lay-button-group>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { ref, onMounted, h ,useTemplateRef} from 'vue'
import { layer } from '@layui/layer-vue'
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "../../../store/app";
import webosutils from 'webosutils';
import { LayerForm } from 'webos-form-design';
import { useTab } from '../../../layouts/composable/useTab'

import flowutils from '../../../utils/flowutils';
import utils from '../../../utils/utils'
import moment from 'moment'
import oasend from './oasend.vue';
import oaback from './oaback.vue';
const layFormRef = useTemplateRef<any>('layFormRef');
const query = ref(new Object()) as any;
const isflow = ref(false);
const step = ref([]) as any;
const currentdata = ref(new Object()) as any;
const signature = ref(false);
const userdata = ref([]);
const nextstep = ref([]) as any;
const commentlist = ref([]) as any;
const field = ref([]) as any;
const rules = ref({});
const userchecked = ref([]);
const sedvisible = ref(false)
const appStore = useAppStore();
const router = useRouter();
const route = useRoute();
const stepselect = ref([]);

const fromdata = ref<any>({});
const users = ref<any>([]);
const userslist = ref([]) as any;
const comment = ref('') as any;
// const layFormRef = ref(null) as any;
const flowevent = ref([]) as any;
const { close } = useTab();



const Events = (ent: any) => {
    switch (ent.id) {
        case "flowsend": flowsend("submit", "发送"); break;
        case "flowback": flowsend("back", "退回"); break;
        case "flowcompleted": flowsend("completed", "完成"); break;
        case "flowsave": flowsend("save", "保存"); break;
        // case "closetab":flowsend();break;
        // case "reload":flowsend();break;
        // case "showprocess":flowsend();break;
        // case "flowredirect":flowsend();break;
        // case "formprint":flowsend();break;
        // case "showflowdesign":flowsend();break;
        // case "showsubflow":flowsend();break;
        // case "showmainflowform":flowsend();break;
        // case "flowsaveIframe":flowsend();break;
    }
}
// 校验
const flowsend = (type: string, snedtitle: string) => {

    layFormRef.value.validate((isValidate: any, model: any, errors: any) => {
        if (!isValidate) {
            errors.forEach((item: any) => {
                layer.notify({
                    title: "温馨提示",
                    content: item.message
                })

            });


            return;
        }
  


    });
}
/**
 *完成任务 
 **/
const CompleteTask = (type: any, model: any) => {
    var opts = new Object() as any;
    opts.type = type;
    opts.steps = [];
    query.value.comment = comment.value;
    webosutils.http.post("/v1/api/workflowtasks/sendTask", { table: fromdata.value.form.table, data: JSON.stringify(model), query: JSON.stringify(query.value), params1: JSON.stringify(opts) }, "正在处理...").then((resp: any) => {

        if (resp.success) {
            layer.notify({
                title: "温馨提示",
                content: resp.msg
            })

        } else {
            layer.notify({
                title: "温馨提示",
                content: resp.msg
            })

        }
    }).catch(resp => {
        layer.notify({
            title: "温馨提示",
            content: "网络错误"
        })
        // layer.msg("网络错误", { icon: 2, time: 1000 });
    });
}
/**
 * 提交
 * **/
const Submit = (snedtitle: string, type: string, model: any) => {
    //如果没有下一个步骤直接完成流程
    if (nextstep.value.length > 0) {
        var sen = h(oasend, { nextstep: nextstep.value, users: [], data: model, callback: uCallback }) as any;
        layer.open({
            title: snedtitle,
            area: ["60%", "60%"],
            content: sen,
            shade: true,
            anim: 4,
            shadeClose: false,
            btn: [
                {
                    text: "确认",
                    callback: (resp: any) => {

                        sen.component.exposed.confirm(fromdata.value.form.table, query, type, resp, layer);
                    },
                },
                {
                    text: "取消",
                    callback: (resp: any) => {
                        layer.close(resp);
                    },
                },
            ]
        })
    } else {
        CompleteTask("completed", model);
    }
}
const Back = (snedtitle: string, type: string, model: any) => {
    //获取可退后得步骤
    if (query.value.stepid == null) {
        layer.notify({
            title: "Error",
            content: "第一个步骤不能退回！",
            icon: 2
        });
    } else {
        var sen = h(oaback, { query: query, type: currentdata.value.behavior.backModel, data: model, callback: uCallback }) as any;
        layer.open({
            title: snedtitle,
            area: ["60%", "60%"],
            content: sen,
            shade: true,
            anim: 4,
            shadeClose: false,
            btn: [
                {
                    text: "确认",
                    callback: (resp: any) => {

                        sen.component.exposed.confirm(fromdata.value.form.table, query, type, resp, layer);
                    },
                },
                {
                    text: "取消",
                    callback: (resp: any) => {
                        layer.close(resp);
                    },
                },
            ]
        })
    }
}
const Save = (type: any, model: any) => {
    var opts = new Object() as any;
    opts.type = type;
    opts.steps = [];
    query.value.comment = comment.value;
    webosutils.http.post("/v1/api/workflowtasks/sendTask", { table: fromdata.value.form.table, data: JSON.stringify(model), query: JSON.stringify(query.value), params1: JSON.stringify(opts) }, "正在处理...").then((resp: any) => {

        if (resp.success) {
            layer.notify({
                title: "温馨提示",
                content: resp.msg
            })
            query.value.flowid = resp.data.flowid;
            query.value.instanceid = resp.data.instanceid;
            query.value.taskid = resp.data.id;
            query.value.stepid = resp.data.stepid; //$("#stepid").val();
            query.value.groupid = resp.data.groupid;
            model.id = resp.data.instanceid;
        } else {
            layer.notify({
                title: "温馨提示",
                content: resp.msg
            })

        }
    }).catch(resp => {
        layer.notify({
            title: "温馨提示",
            content: "网络错误"
        })
        // layer.msg("网络错误", { icon: 2, time: 1000 });
    });
}
const uCallback = (res: any) => {
    if (res.success) {


    } else {
        layer.notify({ title: "温馨提示", content: res.msg })
    }

}


//渲染表单
const render = () => {

    query.value.flowid = route.query.flowid;
    query.value.instanceid = route.query.instanceid;
    query.value.taskid = route.query.taskid;
    query.value.stepid = route.query.stepid; //$("#stepid").val();
    query.value.groupid = route.query.groupid;
    if (query.value.flowid != null && query.value.flowid != undefined && query.value.flowid != "") {
        isflow.value = true;
    } else {
        query.value.formid = route.query.formid;
    }
    init();
}

const init = () => {
    debugger
    if (isflow.value) {
        //初始化流程在初始化表单
        webosutils.http.post(
            "/v1/api/workflowtasks/FlowInit", {
            flowid: query.value.flowid,
            stepid: query.value.stepid,
            instanceid: query.value.instanceid
        },
            "正在初始化流程"
        )
            .then((res: any) => {
                if (res.success) {
                    debugger;
                    currentdata.value = res.currentdata;
                    if (
                        currentdata.value.signatureType == 1 ||
                        currentdata.value.signatureType == "1"
                    ) {
                        signature.value = true;
                    }
                    debugger;
                    var k = JSON.parse(res.formdata.runhtml);
                    k.field = {};
                    fromdata.value = k;
                    nextstep.value = res.data;

                    query.value.titleField = fromdata.value.form.name;
                    if (k.field == null) {
                        var obj = new Object() as any;
                        fromdata.value.data.forEach((key: any) => {
                            for (let keys in key.data) {
                                if (keys == "name") {
                                    obj[key.data[keys]] = key.data['value'];
                                }
                            }
                        });

                        fromdata.value.field = obj;

                    }



                    rules.value = k.rules;
                    flowevent.value = currentdata.value.buttons;
                    if (res.data.length > 0) {
                        res.data.forEach((item: any) => {
                            let o = new Object() as any;
                            o.text = item.name;
                            o.value = item.id;
                            step.value.push(o);
                        });
                    }


                    if (
                        isflow.value &&
                        query.value.instanceid != null &&
                        query.value.instanceid != undefined &&
                        query.value.instanceid != ""
                    ) {
                        getcomment();
                    }



                } else {
                    layer.notify({
                        title: "温馨提示",
                        content: res.msg
                    });



                }
            })
            .catch((resp: any) => { });
    } else {
        //getform();
    }
};

const getcomment = () => {
    if (!query.value || !query.value.instanceid) {
        layer.notify({
            title: "温馨提示",
            content: "无法获取评论：缺少必要的实例ID。"
        });
        return;
    }

    webosutils.http.post("/v1/api/workflowtasks/getcomment", {
        query: JSON.stringify(query.value)
    }, "请稍等")
        .then((res: any) => {
            if (res.success) {
                commentlist.value = res.data || [];
            } else {
                layer.notify({
                    title: "温馨提示",
                    content: res.msg || "无法加载评论数据。"
                });
            }
        })
        .catch((error: any) => {
            layer.notify({
                title: "错误",
                content: "网络请求失败，请重试。"
            });
            console.error("获取评论失败:", error);
        });
};




const getmoment = (s: any) => {
    return moment(s).format('YYYY年MM月DD日')
}
render();


</script>
<style lang="less" scoped>
.commentcontent img,
image {
    width: 100% !important;
}

.title {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: 12px;
}

.describe {
    font-size: 14px;
    margin-bottom: 12px;
}

.footer {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-top: 1px solid whitesmoke;
    line-height: 60px;
    height: 60px;

    .footer-button {
        right: 10px;
        position: absolute;
    }
}
</style>
